import React, { Component } from 'react'
import store from '../../store/store'
import { DeleteTodos, UpdataDone } from '../../store/actions/todo-action'
export default class Item extends Component {
  state = { mouse: false }
  handleMouse = (falg) => {
    return () => {
      this.setState({ mouse: falg })
    }
  }
  handleDelete = (id) => {
    store.dispatch(DeleteTodos(id))
  }
  handleCheck = (id) => {
    return (e) => {
      store.dispatch(UpdataDone(id, e.target.checked))
    }
  }
  render() {
    const { name, done, id } = this.props
    const { mouse } = this.state
    return (
      <li style={{ backgroundColor: mouse ? '#ddd' : "white" }} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
        <label>
          <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
          <span>{name}</span>
        </label>
        <button style={{ display: mouse ? 'inline-block' : 'none', marginLeft: 30 }} onClick={() => { this.handleDelete(id) }}>删除</button>
      </li>
    )
  }
}


